import { useEffect } from 'react';
import * as THREE from 'three';

function SimpleCubeWithLight() {
  useEffect(() => {
    // 1. 初始化场景、相机、渲染器
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 2. 创建立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); // 需使用受光照影响的材质（如 Phong 或 Standard）
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 3.####### 添加光源（关键步骤）
    // 点光源（类似灯泡）
    const pointLight = new THREE.PointLight(0xffffff, 10, 100);
    pointLight.position.set(2, 2, 2);
    scene.add(pointLight);

    // 环境光（均匀补光）
    const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
    scene.add(ambientLight);

    // 4. 设置相机位置
    camera.position.z = 5;

    // 5. 渲染循环
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();

    // 清理函数
    return () => {
      document.body.removeChild(renderer.domElement);
    };
  }, []);

  return <div />;
}

export default SimpleCubeWithLight;
